/*
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-11 14:17:39
 * @LastEditors: 171
 * @LastEditTime: 2022-09-11 15:11:51
 */
// 可拖拽组件
function useDrag(el: any) {
  el.style.position = 'fixed';
  let offsetX: number, offsetY: number;
  const browser = {
    versions: (function () {
      const u = navigator.userAgent;
      return {
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //判断设备
        //  ..... 其他设备信息
      };
    })(),
  };

  let fn: Function = function (event: any) {
    if (event.button == 0 && el != null) {
      const lexObj: any = getComputedStyle(el);
      offsetX = event.pageX - el.offsetLeft + parseInt(lexObj["margin-left"]);
      offsetY = event.pageY - el.offsetTop + parseInt(lexObj["margin-right"]);
      const move = function (event: any) {
        if (el != null) {
          let x = event.pageX - offsetX;
          let y = event.pageY - offsetY;
          if (x < 0) {
            x = 0;
          } else if (x > document.documentElement.clientWidth - el.offsetWidth) {
            x = document.documentElement.clientWidth - el.offsetWidth;
          }
          if (y < 0) {
            y = 0;
          } else if (y > document.documentElement.clientHeight - el.offsetHeight) {
            y = document.documentElement.clientHeight - el.offsetHeight;
          }
          el.style.left = x + "px";
          el.style.top = y + "px";
        }
        return false;
      };
      document.addEventListener("mousemove", move);
      const stop = function () {
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", stop);
      };
      document.addEventListener("mouseup", stop);
    }
    return false;
  };
  el.addEventListener("mousedown", fn);
  return fn;
}

export default useDrag;
